import React, { PureComponent } from 'react'
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    RefreshControl,
    TouchableOpacity,
    ListView,
    Image,
    StatusBar,
    FlatList,
    ActivityIndicator
}
    from 'react-native'

import { PullView } from 'react-native-pull'
import Swiper from 'react-native-swiper'
import { color, Button, NavigationItem, SpacingView, Separator } from '../../../../widget'
import { Heading2, Title, Price } from '../../../../widget/Text'
import { screen, system } from '../../../../common'
import SellGroupItem from '../../SellGroupItem'
import HorizontalItem from '../../HorizontalItem'
import VerticalItem from '../../VerticalItem'
import Banner from '../../Banner'
import NewPersonRecommend from './NewPersonRecommend'
import NewProduct from './NewProduct'
import HotProduct from './HotProduct'
import RecommendPhone from './RecommendPhone'

//import api, { testMD5 } from '../../api'
import * as api from '../../../../api'
import GroupGridView from './GroupGridView';

type Props = {
    navigation: any,
    onPressGroupMore:Function,//点击超值品拼团更多
}

type State = {
    isRefreshing: boolean,
    advertisingList: Array<Object>,
    recommendProductList: Array<Object>,
    recommendPhone: Array<Object>,
    isASuccess: boolean,//是否轮播图请求成功
    isRSuccess: boolean,//是否推荐请求成功
    isPSuccess: boolean, //是否手机请求成功

}


class TabScene_recommend extends PureComponent<Props, State> {


    constructor(props: Props) {
        super(props)
        this.state = {
            isRefreshing: false,
            advertisingList: [],
            recommendProductList: [[], [], []],
            recommendPhone: [],
            isASuccess: true,
            isRSuccess: true,
            isPSuccess: true,
        }
        //this.requestData()
    }

    pullRefresh() {
        setTimeout(() => {
            this.requestData()
            this.setState({ isRefreshing: false })
        }, 2000)
    }

    componentDidMount() {
        this.requestData()
    }

    requestData = async () => {
        this.setState({ isRefreshing: true })
        // this.requestAdvertisingList()
        this.requestRecommendProductList()
        this.requestRecommendPhone()
    }


    requestRecommendProductList = async () => {
        try {
            var parameter = {}
            var list = await api.getRecommendProductList(parameter)

            this.setState({
                recommendProductList: list,
                isRSuccess: true,
                isRefreshing: false ,
            })
        } catch (error) {
            //alert('请求失败，请重试' + error)
            this.setState({
                isRSuccess: false,
                isRefreshing: false ,
            })
        }
    }


    requestRecommendPhone = async () => {
        try {
            let params = { 'pageNum': 1, 'pageSize': 6, 'categoryId': '3360adbe2fca473ca5d8964a955e404a' }
            let json = await api.doPost('/goods/getInfoList', params)
            let dataList = json.data.map(
                (info) => {
                    return {
                        'imageUrl': info.list_image,
                        'title': info.full_name,
                        'buyNum': info.sales_volume,
                        'earn': info.profit,
                        'price': info.member_price,
                        'id': info.id,
                        'description': info.detail_name,
                    }
                }
            )
            this.setState({
                recommendPhone: dataList,
                isPSuccess: true,
                isRefreshing: false ,
            })
        } catch (error) {
            this.setState({
                isPSuccess: false,
                isRefreshing: false ,
            })
        }
    }

    //进入更多界面， type为更多的类型
    onPressMore = (type: string) => {
        // alert(this.props.navigation)
        this.props.navigation.navigate('RecommendMore', { type: type })
    }
    //商品详情界面， id为商品的id
    onPressItem(id: string) {
        alert(id)
    }

    render() {

        return (
            (this.state.isRSuccess && this.state.isASuccess && this.state.isPSuccess) ?
                <View style={styles.container}>
                    <ScrollView
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.isRefreshing}
                                onRefresh={() => this.requestData()}
                                tintColor='gray'
                            />
                        }>

                        <Banner
                            // advertisingList={this.state.advertisingList}
                            navigation={this.props.navigation}
                        />
                        {/*消息通知*/}
                        <TouchableOpacity style={styles.notice}>
                            <View style={styles.notice_title} >
                                <Text style={styles.notice_text_left}>抢购中</Text>
                            </View>
                            <Text style={styles.notice_text_right}>展示活动、通知类消息</Text>
                        </TouchableOpacity>

                        {/*超值拼团 --使用推荐1的数据*/}
                        <GroupGridView
                            infos={this.state.recommendProductList[0]}
                            onPressMore={()=>this.props.onPressGroupMore()}
                            onPressItem={this.onPressItem}
                        />
                        {/*广告区1*/}
                        <Image style={styles.banner} source={require('../../../../img/home/banner.png')} />

                        {/*新人推荐部分*/}
                        <NewPersonRecommend
                            infos={this.state.recommendProductList[0]}
                            OnPressMore={this.onPressMore}
                            OnPressItem={this.onPressItem}
                        />
                        {/*广告区2*/}
                        <Image style={styles.banner} source={require('../../../../img/home/banner.png')} />


                        {/*新品推荐部分*/}
                        <NewProduct
                            infos={this.state.recommendProductList[1]}
                            OnPressMore={this.onPressMore}
                            OnPressItem={this.onPressItem}
                        />
                        {/*广告区3*/}
                        <Image style={styles.banner} source={require('../../../../img/home/banner.png')} />


                        {/*热销爆款部分*/}
                        <HotProduct
                            infos={this.state.recommendProductList[2]}
                            OnPressMore={this.onPressMore}
                            OnPressItem={this.onPressItem}
                        />
                        <RecommendPhone
                            infos={this.state.recommendPhone}
                            OnPressMore={this.onPressMore}
                            OnPressItem={this.onPressItem}
                        />




                    </ScrollView>
                </View>
                : <TouchableOpacity style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
                    onPress={() => this.requestData()}>
                    <Text color={'#FFFF00'}>加载失败!</Text>
                    <Text color={'#FFFF00'}>重新加载</Text>
                </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    PullView: {
        width: screen.width,
    },
    sliderImg: {
        width: screen.width,
        height: screen.width / 3,
    },
    notice: {
        flexDirection: 'row',
        width: screen.width,
        backgroundColor: 'white',
        marginTop:5,
    },
    notice_title: {   
        alignItems:'center',
        width: screen.width * 0.097,
        marginLeft: screen.width * 0.053,
        // paddingLeft: 2,
        borderRadius: 2,
        borderWidth: 1,
        // alignSelf: 'center',
        // justifyContent: 'center',
        borderColor: '#F15A3E',
        padding: 1,
    },
    notice_text_left:{
        fontSize: 10,
        color: '#F15A3E',
    },
    icon_Recommend: {
        width: screen.width - 20,
        height: screen.width * 0.11,
        marginTop: 10,
        marginLeft: 10,
        marginRight: 10,
        backgroundColor: 'white',
        resizeMode: 'contain',
    },
    notice_text_right: {
        fontSize: 10,
        color: '#333333',
        marginLeft: 5,
        marginTop:2,
    },
    subTitle: {
        flexDirection: 'row',
        //height: 30,
        width: screen.width,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 10,
        paddingRight: 10,
        paddingTop: 15,
        paddingBottom: 15,
        backgroundColor: 'white'
    },
    VerticalItemContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 10,
        backgroundColor: 'white'
    },
    banner: {
        width: screen.width,
        height: screen.width * 0.22,
        resizeMode: 'contain',
        marginTop: 2,
    }
})


export default TabScene_recommend
